<template>
  <div>
    <router-link to="/TransferEntry">
      <el-button>
        转账
      </el-button>
    </router-link>
    <div style="display: inline" v-show="isLogin&&userName==='lelouch'">
    <el-button @click="gotoRole">角色管理</el-button>
    <el-button @click="gotoUser">用户管理</el-button>
    </div>
    <div style="display: inline"v-show="isLogin&&userName!=='lelouch'">
      <el-button @click="gotoSelf">个人中心</el-button>
    </div>
    <div class="login">
      <span v-show="isLogin">{{this.userName}}</span>
      <el-button type="text" @click="dialogFormVisible = true" v-show="!isLogin">登录</el-button>
      <el-button type="text" @click="handleLogout" v-show="isLogin">登出</el-button>
    </div>
    <!--弹出的对话框-->
    <el-dialog title="请登录" :visible.sync="dialogFormVisible">
      <el-form :model="form" status-icon :rules="rules" ref="form">
        <el-form-item label="账号" :label-width="formLabelWidth" prop="account">
          <el-input v-model="form.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
          <el-input type="password" v-model="form.password" autocomplete="off"
                    @keyup.enter.native="submitForm('form')"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        dialogFormVisible: false,
        form: {
          account: '',
          password: ''
        },
        formLabelWidth: '120px',
        rules: {
          account: [{required: true, message: '请输入账号', trigger: 'blur'}],
          password: [{required: true, message: '请输入密码', trigger: 'blur'},
            {min: 3, max: 11, message: '密码位数在3到11位', trigger: 'blur'}]
        },
        isLogin: false,
        userName: ''
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios.post('/api/users/login', {account: this.form.account, password: this.form.password}).then(res => {
              if (res.data.status === '1') {
                this.dialogFormVisible = false;
                this.userName = res.data.result;
                this.isLogin = true;
              } else {
                this.$message.error(res.data.msg);
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleLogout() {
        //服务器吧cookie中的token杀掉了
        axios.post('/api/users/logout').then(res=>{
          if (res.data.status==='1'){
            //现在恢复原来的样式
            this.userName = '';
            this.isLogin = false;
          }
        })
      },
      gotoRole() {
        if (this.isLogin) {
          this.$router.push('/roleManagement/management')
        }else {
          this.dialogFormVisible = true;
        }
      },
      gotoUser(){
        if (this.isLogin) {
          this.$router.push('/userMain/queryList')
        }else {
          this.dialogFormVisible = true;
        }
      },
      gotoSelf(){
        if (this.isLogin) {
          this.$router.push(`/selfCenter/list/${this.userName}`)
        }else {
          this.dialogFormVisible = true;
        }
      }
    },
    mounted() {
      //自定全局方法
      let result = this.hc_isLogin();
      result.then(result => {//上一个promise的then方法的回调函数的返回值 作为 下一个的promise的then方法的回调函数的参数
        if (result !== undefined) {
          this.userName = result.userName;
          this.isLogin = result.isLogin;
        }
      });

    }
  };
</script>

<style scoped>
  .login {
    float: right;
    margin-right: 5%;
  }
</style>
